<template>
  <div class="sidebar">
    <el-menu
            class="sidebar-el-menu"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#20a0ff"
            :default-active="onRoutes"
            :collapse="collapse"
            unique-opened
            router
            @open="handleOpen">
      <el-submenu v-if="item1.subs.length > 0" v-for="item1 in items" :key="item1.index" :index="item1.index">
        <template slot="title">
          <i :class="item1.icon"></i>
          <span>{{item1.title}}</span>
        </template>
        <el-submenu v-if="item2.subs.length > 0" v-for="item2 in item1.subs" :key="item2.index"
                    :index="item2.index">
          <template slot="title">
            <i :class="item2.icon"></i>
            <span>{{item2.title}}</span>
          </template>
          <el-submenu v-if="item3.subs.length > 0" v-for="item3 in item2.subs" :key="item3.index"
                      :index="item3.index">
            <template slot="title">
              <i :class="item3.icon"></i>
              <span>{{item3.title}}</span>
            </template>
            <el-menu-item v-for="item4 in item3.subs" :key="item4.index" :index="item4.index">
              <i :class="item4.icon"></i>
              <span>{{item4.title}}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="item3.index">
            <i :class="item3.icon"></i>
            <span>{{item3.title}}</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item v-else :index="item2.index">
          <i :class="item2.icon"></i>
          <span>{{item2.title}}</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item1.index">
        <i :class="item1.icon"></i>
        <span>{{item1.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
  import bus from '../common/bus';

  export default {
    data() {
      return {
        collapse: false,
        items: []
      };
    },
    computed: {
      onRoutes() {
        return this.$route.path.replace('/', '');
      }
    },
    methods: {
      getItems() {
        this.items = [
          {
            icon: 'el-icon-lx-home',
            index: 'dashboard',
            title: '系统首页',
            subs: []
          },
          {
            icon: 'el-icon-lx-cascades',
            index: 'table',
            title: '地质工程',
            subs: []
          },
          {
            icon: 'el-icon-lx-copy',
            index: '_2',
            title: '钻井工程',
            subs: [
              {
                index: '2-1',
                title: '井基础数据',
                subs: [
                  {
                    index: '2-1-1',
                    title: '井基本数据',
                    subs: []
                  },
                  {
                    index: '2-1-2',
                    title: '地质分层数据',
                    subs: []
                  },
                  {
                    index: '2-1-3',
                    title: '井身结构数据',
                    subs: []
                  },
                  {
                    index: '2-1-4',
                    title: '井眼轨道数据',
                    subs: []
                  },
                  {
                    index: '2-1-5',
                    title: '钻井施工进度计划',
                    subs: []
                  }
                ]
              },
              {
                index: '2-2',
                title: '生产日报',
                subs: []
              },
              {
                index: '_2-3',
                title: '单井统计',
                subs: [
                  {
                    index: '2-3-1',
                    title: '钻头使用统计（自动）',
                    subs: []
                  },
                  {
                    index: '2-3-2',
                    title: '螺杆使用统计（自动）',
                    subs: []
                  },
                  {
                    index: '2-3-3',
                    title: '分井段工期（自动）',
                    subs: []
                  },
                  {
                    index: '2-3-4',
                    title: '固井统计（手工）',
                    subs: []
                  },
                  {
                    index: '2-3-5',
                    title: '故障复杂统计（手工）',
                    subs: []
                  },
                  {
                    index: '2-3-6',
                    title: '新工艺新技术（手工）',
                    subs: []
                  },
                  {
                    index: '2-3-7',
                    title: '完成井技术指标统计（手工）',
                    subs: []
                  }
                ]
              },
              {
                index: '_2-4',
                title: '单井对比分析',
                subs: [
                  {
                    index: '_2-4-1',
                    title: '平均机械钻速',
                    subs: [
                      {
                        index: '2-4-1-1',
                        title: '全井',
                        subs: []
                      },
                      {
                        index: '2-4-1-2',
                        title: '开次',
                        subs: []
                      },
                      {
                        index: '2-4-1-3',
                        title: '井段',
                        subs: []
                      },
                      {
                        index: '2-4-1-4',
                        title: '时段',
                        subs: []
                      },
                      {
                        index: '2-4-1-5',
                        title: '分层',
                        subs: []
                      },
                      {
                        index: '2-4-1-6',
                        title: '单只钻头',
                        subs: []
                      },
                    ]
                  },
                  {
                    index: '2-4-2',
                    title: '作业天数',
                    subs: []
                  },
                  {
                    index: '2-4-3',
                    title: '单井时效图',
                    subs: []
                  }
                ]
              },
              {
                index: '2-5',
                title: '多井对比分析',
                subs: []
              },
              {
                index: '2-6',
                title: '岩石可钻性',
                subs: []
              },
              {
                index: '2-7',
                title: '实时数据监测',
                subs: []
              },
              {
                index: '2-8',
                title: '钻井工况识别',
                subs: []
              },
              {
                index: '2-9',
                title: '轨迹监测与防碰',
                subs: []
              },
              {
                index: '2-10',
                title: '故障复杂提示',
                subs: []
              }
            ]
          },
          {
            icon: 'el-icon-lx-calendar',
            index: '',
            title: '录井工程',
            subs: [
              {
                index: 'form',
                title: '录井',
                subs: []
              },
              {
                index: '3-1',
                title: '三级菜单',
                subs: [
                  {
                    index: 'editor',
                    title: '富文本编辑器',
                    subs: []
                  },
                  {
                    index: 'markdown',
                    title: 'markdown编辑器',
                    subs: []
                  }
                ]
              },
              {
                index: '3-2',
                title: '三级菜单',
                subs: [
                  {
                    index: 'editor',
                    title: '富文本编辑器',
                    subs: []
                  },
                  {
                    index: 'markdown',
                    title: 'markdown编辑器',
                    subs: []
                  }
                ]
              },
              {
                index: 'upload',
                title: '文件上传',
                subs: []
              }
            ]
          },
          {
            icon: 'el-icon-lx-emoji',
            index: 'icon',
            title: '测井工程',
            subs: []
          },
          {
            icon: 'el-icon-pie-chart',
            index: 'charts',
            title: '压裂试气',
            subs: []
          },
          {
            icon: 'el-icon-rank',
            index: '6',
            title: '导入数据库',
            subs: [
              {
                index: 'drag',
                title: '拖拽列表',
                subs: []
              },
              {
                index: 'dialog',
                title: '拖拽弹框',
                subs: []
              }
            ]
          },
          {
            icon: 'el-icon-lx-global',
            index: 'i18n',
            title: '知识库',
            subs: []
          },
          {
            icon: 'el-icon-lx-warn',
            index: '7',
            title: '系统管理',
            subs: [
              {
                index: 'permission',
                title: '权限测试',
                subs: []
              },
              {
                index: '404',
                title: '404页面',
                subs: []
              }
            ]
          }
        ];
      },
     handleOpen(key, keyPath) {
        let notPage = key.charAt(0);
        if(notPage != "_") {
          this.$router.push(key).catch(err => err);
        }
      }
    },
    created() {
      // 通过 Event Bus 进行组件间通信，来折叠侧边栏
      bus.$on('collapse', msg => {
        this.collapse = msg;
        bus.$emit('collapse-content', msg);
      });
      //获取菜单列表数据
      this.getItems();
    }
  };
</script>

<style scoped>
  .sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
  }

  .sidebar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
  }

  .sidebar > ul {
    height: 100%;
  }
</style>